<template>
  <div class="user">
    <div class="b-f p-l p-r p-t">
      <SearchComp
        :searchForm="searchForm"
        :searchData="searchData"
        :searchAction="searchAction"
      ></SearchComp>
    </div>

    <div class="m-t b-p-f">
      <div class="btnStyle flex-between m-b">
        <el-button type="primary" size="small" @click="addUser()"
          >新增用户</el-button
        >
        <el-button type="danger" size="small" @click="delAll()"
          >批量删除</el-button
        >
      </div>
      <TableComp
        class="m-t km-table"
        ref="multipleTable"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :tableAction="tableAction"
        :isSelect="true"
        :isIndex="true"
        :isShowPage="true"
        :queryParams="queryParams"
        @handleSelectionChange="handleSelectionChange"
        @getPagination="getList"
      >
        <template v-slot:userEnable="scope">
          <div class="table-slot">
            <el-switch
              v-model="scope.row.userEnable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeSwitch(scope.row)"
            >
            </el-switch>
          </div>
        </template>
      </TableComp>
    </div>
    <userDialog ref="userDialog" />
  </div>
</template>

<script>
import userDialog from "./common/userDialog";

export default {
  dicts: ["system"],
  components: {
    userDialog,
  },
  data() {
    return {
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [],
      tableConfig: [
        {
          prop: "fullName",
          label: "用户名",
        },
        {
          prop: "name",
          label: "用户账号",
        },
        {
          prop: "roleNames",
          label: "所属角色",
        },
        {
          prop: "createTime",
          label: "创建时间",
        },
        {
          prop: "userEnable",
          label: "状态",
          isSlot: true,
        },
      ],
      tableAction: {
        align: () => "center",
        width: () => String(60 * 3),
        operations: [
          {
            label: "查看",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "查看用户",
                isEdit: "look",
                row,
              };
              this.$refs.userDialog.show(obj);
            },
          },
          {
            label: "编辑",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "编辑用户",
                isEdit: "edit",
                row,
              };
              this.$refs.userDialog.show(obj);
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.delete([row.id]);
            },
          },
        ],
      },
      searchData: {
        name: "",
      },
      searchForm: {
        changeMethod: () => this.getList(),
        formData: [
          {
            type: "Input",
            label: "用户名",
            prop: "name",
            clearable: true,
            icon: "el-icon-search",
            placeholder: "请输入用户名",
          },
        ],
      },
      searchAction: [
        {
          label: "查找",
          type: "primary",
          handle: () => {
            this.getList();
          },
        },
        {
          label: "重置",
          type: "primary",
          plain: true,
          handle: () => {
            this.searchData = {
              name: "",
            };
            this.getList();
          },
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNum: this.queryParams.currentPage,
        pageSize: this.queryParams.pageSize,
        ...this.searchData,
      };
      this.$axios
        .post(this.$api.setting.userApi.getUserList, params)
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            data.rows.map((item) => {
              item.enableFlag === "n"
                ? (item.userEnable = false)
                : (item.userEnable = true);
            });
            this.tableData = data.rows;
            this.queryParams.total = data.total;
          }
        });
    },
    addUser() {
      let obj = {
        title: "新建用户",
        isEdit: "add",
      };
      this.$refs.userDialog.show(obj);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAll() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择要删除的数据",
        });
        return;
      }
      const ids = [];
      this.multipleSelection.forEach((items) => {
        ids.push(items.id);
      });
      this.$confirm(`确定要删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteFun(ids);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    delete(ids) {
      this.$confirm(`确定要删除当前用户吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteFun([ids]);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    deleteFun(ids) {
      const formData = new FormData();
      formData.append("idList", ids);
      this.$axios
        .post(this.$api.setting.userApi.deleteUser, formData)
        .then((res) => {
          const { code } = res.data;
          if (code == 200) {
            this.getList();
            this.$refs.multipleTable.clearSelection();
          }
        });
    },
    changeSwitch(row) {
      this.$confirm(
        `本操作将${row.enableFlag === "y" ? "关闭" : "开启"}该用户，是否继续？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          row.enableFlag === "y"
            ? (row.enableFlag = "n")
            : (row.enableFlag = "y");
          this.$axios
            .post(this.$api.setting.userApi.updateUser, row)
            .then((res) => {
              const { code } = res.data;
              if (code == 200) {
                this.cancel();
                this.getList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped></style>
